@import './transition.scss';
$-text-theme: primary, success, warning, danger, error, info;

#app {
  height: 100%;
  width: 100%;
  position: relative;
}

* {
  box-sizing: border-box;

  &::before,
  &::after {
    box-sizing: border-box;
  }
}

a {
  color: inherit;
  text-decoration: inherit;
}

p {
  margin: 0;
}

.app-container {
  padding: var(--app-container-padding);
  min-height: 100%;
  overflow: hidden;
  background-color: #fff;
}

@each $theme in $-text-theme {
  .text-#{$theme} {
    color: var(--el-color-#{$theme});
  }
}

// 查询条件
.search-container {
  --size-large: 18px;
  margin-top: var(--size-large);

  .search-btns {
    text-align: center;

    .el-button {
      margin-bottom: var(--size-large);
    }
  }

  .app-container > & {
    margin-top: 0px;
  }

  @media (max-width: 767px) {
    margin-bottom: var(--size-large);
    border-bottom: 10px solid var(--el-border-color-lighter);;
    .el-form {
      .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        display: block;
      }
      .el-form-item__label {
        width: 100% !important;
        justify-content: flex-start;
      }
    }
    .search-btns {
      margin-top: var(--size-large);
    }
  }

  @media (min-width: 1200px) {
    display: flex;
  
    .el-form {
      display: flex;
      flex-flow: row wrap;
      // flex-shrink: 0;
      flex: 1;
    }

    .search-btns {
      min-width: 150px;
      flex-shrink: 1;
      text-align: right;
    }
  }
}

// 表格容器
.table-container {

  .table-toolbar {
    display: flex;
    justify-content: space-between;

    .el-button {
      margin-bottom: 18px;
    }
  }
}

// 表格操作
.operation {
  a {
    line-height: 1;
    padding: 0 10px;

    &+a {
      border-left: 1px solid var(--el-color-primary);
    }
  }
}

.select-area {
  display: flex;
  .el-select {
    & + .el-select {
      margin-left: 8px;
    }
  }
}

.el-select {
  width: 100%;
}

.el-date-editor {
  &.el-input {
    flex: 1;
  
    .el-input__wrapper {
      width: 100%;
    }
  }
}

.el-dialog {
  @media (max-width: 767px) {
    min-width: 90%;
  }
}